<template>
	<div class="mine">
		<div class="mine_hd">
			<div class="mine_user">
				<div class="mine_img"><img src="https://s1.mi.com/m/images/m/default.png" alt="" /></div>
			     <div class="mine_name">
			     	<p>xun</p>
			     	<div>172401892</div>
			     </div>
			</div>
		</div>
		<div class="mine_al">
			<div class="mine_order">
				<span>我的订单</span>
				<p>全部订单  &gt; </p>
			</div>
		</div>
         <ul class="mine_nav">
         	<li class="dfk">
         		<div class="icon"></div>
         		<span>待付款</span>
         	</li>
         	<li class="dsh">
         		<div class="icon"></div>
         		<span>待收货</span>
         	</li>
         	<li class="thx">
         		<div class="icon"></div>
         		<span>退换修</span>
         	</li>
         </ul>
         <div class="mine_items">
         	<ul>
         		<li class="i_wallet"><cite>我的优惠</cite></li>
         	</ul>
         </div>
	</div>
</template>

<script type="text/javascript">
	
</script>

<style scoped>
	.mine_hd{
		background: url('https://m.mi.com/views/user/index/img/bg_0425a88.png') center 0 #f37d0f;
	background-size: auto 100%;
	padding: .2rem 0;
	}
	.mine_img>img{
		width: 0.49rem;
		height: 0.49rem;
		float: left;
		margin-left: 0.2rem;
		margin-right: 0.1rem;
	}
	.mine_user{
		width:100%;
		height: 0.55rem;
	}
	.mine_name p{
		font-weight: 500;
		font-size: 0.18rem;
		color: white;
	}
	.mine_name div{
		font-size: 0.14rem;
		color:#fff;
		opacity: .6;
	}
	.mine_order{
		height: 0.47rem;
		border-bottom: .01rem solid gainsboro;
	}
	.mine_order span{
	    font-size: 0.17rem;	
	    float: left;
	    line-height: 0.47rem;
	    margin-left: 0.25rem;
	}
	.mine_order p{
		font-size: 0.15rem;
		float:right;
	    line-height: 0.47rem;
	    margin-right: 0.2rem;
	    color: darkgrey;
	}
	.mine_nav{
		padding: 0 .4rem;
		display: flex;
		
	    align-items: center;
	    justify-content: space-between;
	}
	.mine_nav .dfk .icon{
		background: url('https://m.mi.com/views/user/index/img/nav-1_f74ca94.png') no-repeat center center;
		background-size: 100% auto;
		width: 0.3rem;
		height: 0.3rem;
		margin-top: 0.25rem;
		margin-bottom: .1rem;
	}
	.mine_nav .dsh .icon{
		background: url('https://m.mi.com/views/user/index/img/nav-2_a05a641.png') no-repeat center center;
		background-size: 100% auto;
		width: 0.3rem;
		height: 0.3rem;
		
		margin-top: .2rem;
		margin-bottom: .1rem;
	}
	.mine_nav .thx .icon{
		background: url('https://m.mi.com/views/user/index/img/nav-4_42676a4.png') no-repeat center center;
		background-size: 100% auto;
		width: 0.3rem;
		height: 0.3rem;
		margin-top: .2rem;
		margin-bottom: .1rem;
	}
	.mine_nav li span{
		font-size: 0.14rem;
	     float: left;
	}
	.mine_items .i_wallet{
		background: url('https://m.mi.com/img/i=setting.png') no-repeat .2rem center;
		background-size: .3rem auto;
	}
</style>